<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name:'系统管理'},{name:'角色列表'}]"></v-breadcrumb>

        <div class="g-box" style="min-height:600px">
            <div class="flex-center flex-between">
                <el-button v-preventDbClick icon="el-icon-plus" type="primary" class="mb-15" @click="add(0)">新建
                </el-button>
                <div></div>
            </div>
            <el-table :data="list" :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="100"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column fixed="right" border width="120" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="编辑" @click="edit(scope.$index)" type="primary"
                                   icon="el-icon-edit-outline" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="删除" @click="del(scope.$index)" type="danger"
                                   icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";

export default {
    data() {
        return {
            total: 0,
            list: [],
        };
    },

    computed: {},

    created() {
        this.getData();
    },

    methods: {
        add() {
            this.$router.push({path: "/system/manage-role-detail"});
        },
        edit(index) {
            this.$router.push({path: "/system/manage-role-detail?id=" + this.list[index].id});
        },

        del(index) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/manageRole/realDel',
                    data: {id: this.list[index].id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.addDialogIsShow = false;
                        this.getData();
                    })
                })
            });
        },

        getData() {
            request({
                url: '/manage/manageRole/all',
            }).then((res) => {
                this.list = res.data;
            })
        },

    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

.index-container {
    .image {
        width: 50px;
        height: 50px;
        border: none;
        margin-top: 5px;
    }
}
</style>
